<template>
	<div class="padding-lr-xs">
		<a-form v-if="!~['bpmn:CallActivity', 'bpmn:SubProcess'].indexOf(formData.type)">
			<a-form-item>
				
				<span class="title">多实例类型</span>
				<a-tooltip placement="bottomRight" overlayClassName="custom-tip">
				  <template slot="title">
				    <div style="display: flex;">
				      <div>
				        <h3>什么是同步执行？</h3>
				        <p style="margin-bottom: 8px;">同步执行代表同时进行，如把任务分给5个人来处理，这5个人同时会收到任务，并且可以同时处理，不受各自的影响。</p>
				        <h3>什么是顺序执行？</h3>
				        <p>顺序执行代表工作或任务由一个人完成后，再由另一个人去处理，直至全部完成，每个任务依赖于前一个任务完成。</p>
				        <p>提示：只支持指定人员、指定角色、指定岗位</p>
				      </div>
				    </div>
				  </template>
					<a-icon type="question-circle-o" />
				</a-tooltip>
				
        <a-select v-model="formData.isSequential" @change="isSequentialChange" placeholder="请选择实例类型" :disabled="meetCountersignature">
          <a-select-option value="1">无</a-select-option>
          <a-select-option value="false">同步执行</a-select-option>
          <a-select-option value="true">顺序执行</a-select-option>
        </a-select>
			</a-form-item>
			<a-form-item>
				<span class="title">完成条件</span>
        <a-tooltip title="多人审核时按照设置的百分比来通过审核">
          <a-icon type="question-circle-o" />
        </a-tooltip>

        <a-select v-model="formData.completeCondition" :disabled="disabled || meetCountersignature" @change="completeConditionChange" placeholder="请选择完成条件">
          <a-select-option value="all">全部通过</a-select-option>
          <a-select-option value="proportion">按比例通过</a-select-option>
        </a-select>
			</a-form-item>
			<a-form-item v-if="formData.completeCondition === 'proportion'">
				<span class="title">百分比</span>
				<a-select placeholder="请选择百分比" :disabled="disabled" @change="percentageChange" v-model="formData.percentage">
					<a-select-option value="10">10%</a-select-option>
					<a-select-option value="20">20%</a-select-option>
					<a-select-option value="30">30%</a-select-option>
					<a-select-option value="40">40%</a-select-option>
					<a-select-option value="50">50%</a-select-option>
					<a-select-option value="60">60%</a-select-option>
					<a-select-option value="70">70%</a-select-option>
					<a-select-option value="80">80%</a-select-option>
					<a-select-option value="90">90%</a-select-option>
					<a-select-option value="100">100%</a-select-option>
				</a-select>
			</a-form-item>
			<a-alert message="当设置审批人为指定成员，指定角色，指定岗位的数据后会签设置才启用" banner />
		</a-form>
	</div>
</template>

<script>
	export default {
		name: "NodeBasicConfig",
		props: {
			modeler: {
				type: Object,
				required: true
			},
			nodeElement: {
				type: Object,
				required: true
			},
			formData: {
				type: Object,
				required: true
			},
			formFieldLists:{
			  type: Array
			},
			updateList:{
			  type: Array
			},
      value: {
        type: Array,
      },
		},
		data() {
			return {
				labelCol: {
					xs: {
						span: 24,
					},
					sm: {
						span: 7,
					},
				},
				wrapperCol: {
					xs: {
						span: 24,
					},
					sm: {
						span: 17,
					},
				},
				meetCountersignature: true, // 是否满足开启会签要求
				conditionVisible:false,
				disabled: false
			}
		},
		watch: {
			formData: {
				deep: true,
				immediate: true,
				handler(newVal, oldVal) {
					if (newVal.isSequential == '1') {
						this.clearAssignee()
					}
					// 只有审批人员选择了指定人员/指定角色/指定岗位才能开启会签
					if (newVal.candidateGroupsName || newVal.candidateUsersName) {
						this.meetCountersignature = false;
						// 表单变量特殊情况，也不能设置会签
						if (newVal.candidateUsers?.startsWith('${')) {
							this.clearAssignee();
							this.meetCountersignature = true;
						}
					} else {
						if (newVal && oldVal && newVal.id === oldVal.id) {
							if (!newVal.candidateGroups && !newVal.candidateGroupsName && !newVal.candidateUsers && !newVal.candidateUsersName) {
								this.clearAssignee();
								this.meetCountersignature = true;
							} 
						}
					}
				}
			},
		},
		mounted() {
		  // this.getFormData();
		},
		methods: {
			// 当会签选择无或者审批人不选择角色/岗位/成员后，删除会签状态
			clearAssignee() {
				if (this.nodeElement.businessObject?.loopCharacteristics) {
					// 清除流程xml节点上的状态
					delete this.nodeElement.businessObject.loopCharacteristics;
					this.updateProperties({ businessObject: this.nodeElement.businessObject });
					// 清除视图节点状态
					this.formData.isSequential = '1';
					this.updateProperties({
						isSequential: '1',
					});
					this.formData.completeCondition = undefined;
					this.updateProperties({
						completeCondition: undefined,
					});
					this.formData.percentage = undefined;
					this.updateProperties({
						percentage: undefined,
					});
				} else {
					return
				}
			},
			getFormData() {
			  const cache = JSON.parse(
			    JSON.stringify(this.nodeElement.businessObject?.loopCharacteristics ?? {})
			  );
			  cache.completionCondition = cache.completionCondition?.body;
			  cache.isSequential = cache.isSequential ? cache.isSequential : false;
			  // 移除flowable前缀，格式化数组
			  for (const key in cache) {
			    if (key.indexOf("flowable:") === 0) {
			      const newKey = key.replace("flowable:", "");
			      cache[newKey] = cache[key];
			    } else {
			      cache[key] = cache[key];
			    }
			  }
			  this.formData = cache;
			},
			updateProperties(properties) {
				this.modeler.get("modeling").updateProperties(this.nodeElement, properties);
			},
			finishConditionVisible(){
			  this.conditionVisible = false
			},
			isSequentialChange(val){
				if (this.nodeElement.businessObject?.percentage) delete this.nodeElement.businessObject.percentage;
				if (this.nodeElement.businessObject?.completeCondition) delete this.nodeElement.businessObject.completeCondition;
				this.transferStation(val)
				this.updateProperties({
					isSequential: val
				})
				// 开启会签后默认选择全部通过
				if (val === 'true' || val === 'false' && !this.formData.percentage) {
					this.formData.percentage = 100;
					this.transferStation('all');
					this.updateProperties({
						completeCondition: 'all',
					})
				}
			},
			completeConditionChange(val){
				if(val === "all"){
					this.formData.percentage = 100;
				}
				this.transferStation(val)
				this.updateProperties({
					completeCondition: val
				})
			},
			percentageChange(val){
				this.transferStation(val)
				this.updateProperties({
				  percentage: val
				});
			},
			transferStation(val){
				if (this.formData.isSequential != 1) {
					this.disabled = false;
				  let multiInstanceLoopCharacteristics = this.nodeElement.businessObject.get(
				    "loopCharacteristics"
				  );
				  if (!multiInstanceLoopCharacteristics) {
				    multiInstanceLoopCharacteristics = this.modeler
				      .get("moddle")
				      .create("bpmn:MultiInstanceLoopCharacteristics");
				  } else {
				    delete this.nodeElement.businessObject.loopCharacteristics;
				    multiInstanceLoopCharacteristics = this.modeler
				      .get("moddle")
				      .create("bpmn:MultiInstanceLoopCharacteristics");
				  }
					multiInstanceLoopCharacteristics[
					  "isSequential"
					] = this.formData.isSequential;
					multiInstanceLoopCharacteristics[
					  "collection"
					] = "${multiInstanceHandler.getUserIds(execution)}"; // 集合
					multiInstanceLoopCharacteristics[
					  "elementVariable"
					] = "assignee"; // 元素变量
				  if (this.formData.completeCondition) {
				    const completionCondition = this.modeler
				      .get("moddle")
				      .create("bpmn:Expression", {
				        body: "${nrOfCompletedInstances/nrOfInstances >= "+parseInt(this.formData.percentage)/100+"}"
				      });
				    multiInstanceLoopCharacteristics[
				      "completionCondition"
				    ] = completionCondition;
				  }
				  this.updateProperties({
				    loopCharacteristics: multiInstanceLoopCharacteristics,
				  });
					this.updateProperties({
						assignee: '${assignee}'
					});
				} else {
					this.disabled = true;
				  delete this.nodeElement.businessObject.loopCharacteristics;
				  this.updateProperties({ businessObject: this.nodeElement.businessObject });
				}
			},
		}
	}
</script>

<style lang="less" scoped="scoped">
	.title{
		color: rgba(0,0,0,.85);
		margin-right: 10px;
	}
	
	.custom-tip {
	  max-width: 600px !important;
	
	  p {
	    color: #000;
	  }
	
	  .ant-tooltip-arrow::before {
	    background-color: #fff !important;
	  }
	
	  .ant-tooltip-inner {
	    background-color: #fff !important;
	  }
	}
</style>
